<template>
	<view>
		<view class="store-item" v-for="(item, index) in dataList" :key="index" @click="clickStoreItem(item)">
			<view class="img-box">
				<image class="store-img" :src="baseUrl+item.images" mode="aspectFill" />
			</view>
			<view class="info-box">
				<view class="name">{{ item.storeName }}</view>
				<view class="time">
					<image class="time-img" :src="baseIconUrl + 'icon_time.png'" mode="aspectFill" />
					{{ item.openingTime }} - {{ item.closingTime }}
				</view>
				<view class="delivery-fee">
					配送费￥{{ item.freight }}
				</view>
				<view class="label-box">
					<div class="label-item" v-for="(lItem, lIndex) in item.tegNames" :key="lIndex">{{ lItem }}</div>
				</view>
			</view>
			<view class="distance-box">{{ item.distance }}km</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	export default {
		name: 'StoreListComponent',
		data() {
			return {
				baseUrl,
				dataList: [],
				baseIconUrl,
				baseImgUrl
			}
		},
		props: {
			storeList: {
				type: Array,
				default: []
			}
		},
		watch: {
			storeList: {
				handler(newVal, oldVal) {
					this.dataList = uni.$u.deepClone(newVal)
				},
				deep: true
			}
		},

		created() {
			this.dataList = uni.$u.deepClone(this.storeList)
		},

		methods: {
			clickStoreItem(item) {
				uni.navigateTo({
					url: `/subPages/store/storeDetail?storeId=${item.id}`
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.store-item {
		display: flex;
		margin-bottom: 40rpx;

		.img-box {
			width: 160rpx;
			height: 160rpx;
			border-radius: 12rpx;
			overflow: hidden;

			// background-color: rgba(18, 99, 82, .1);
			.store-img {
				width: 100%;
				height: 100%;
			}
		}

		.info-box {
			flex: 1;
			margin: 0 20rpx;

			.name {
				font-weight: 700;
				font-size: 30rpx;
			}

			.time {
				display: flex;
				align-items: center;
				padding: 6rpx 0;
				font-size: 24rpx;
				color: #999;

				.time-img {
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
			}

			.delivery-fee {
				margin-bottom: 6rpx;
				font-size: 24rpx;
			}

			.label-box {
				display: flex;
				align-items: center;
				flex-flow: row wrap;

				.label-item {
					margin: 0 10rpx 10rpx 0;
					padding: 6rpx;
					border-radius: 4rpx;
					font-size: 20rpx;
					color: #126352;
					background-color: rgba(18, 99, 82, .1);

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.distance-box {
			display: flex;
			align-items: center;
		}
	}
</style>